<template xmlns="http://www.w3.org/1999/html">
  <div id="teamAddPage">
      <div style="display: flex; align-items: center;justify-content: space-between;height: 50px">
          <div style="margin-left: 20px;">只看必选项</div>
          <van-switch v-model="checked" />
      </div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="addUserData.userAccount"
            name="name"
            label="账号"
            placeholder="请输入用户名(必填)"
            :rules="[{ required: true, message: '请输入队伍名' }]"
        />
        <van-field
                v-model="addUserData.userPassword"
                name="name"
                label="密码"
                placeholder="请输入密码(至少八位数)(必填)"
                :rules="[{validator: checkPassword, required: true, message: '密码至少多于8位' }]"
        />
          <van-field
                v-show="!checked"
                v-model="addUserData.email"
                name="name"
                label="邮箱"
                placeholder="请输入邮箱"
          />
          <van-field
                  v-show="!checked"
                  v-model="addUserData.phone"
                  name="name"
                  label="手机号"
                  placeholder="请输入手机号"
          />
          <van-field
                  v-model="addUserData.userRoleText"
                  is-link
                  readonly
                  name="picker"
                  label="权限选择"
                  placeholder="点击选择权限"
                  @click="showPicker = true"
                  :rules="[{required: true, message: '请输入权限' }]"
          />
          <van-popup v-model:show="showPicker" position="bottom">
              <van-picker
                      :columns="columns"
                      @confirm="onConfirmPicker"
                      @cancel="showPicker = false"
              />
          </van-popup>
        <van-field
                  v-show="!checked"
                  v-model="addUserData.userProfile"
                  rows="4"
                  autosize
                  label="个人介绍"
                  type="textarea"
                  placeholder="请输入个人介绍"
        />
          <van-field
                  v-model="signLocationInfo.deptName"
                  name="name"
                  label="所在公司"
                  readonly
                  placeholder="默认指定公司"
                  class="readonly-field"
          />
          <van-field
                  v-model="signLocationInfo.deptLocation"
                  name="name"
                  label="签到位置"
                  readonly
                  placeholder="签到位置"
                  class="readonly-field"
          />
          <van-field
                  v-model="signLocationInfo.deptSignGpsLocation"
                  name="name"
                  label="gps定位"
                  readonly
                  placeholder="公司gps定位"
                  class="readonly-field"
          />
          <van-field
                  v-model="signLocationInfo.signInTimeSFM"
                  name="name"
                  label="签到时间"
                  readonly
                  placeholder="默认签到时间"
                  class="readonly-field"
          />
          <van-field
                  v-model="signLocationInfo.signOutTimeSFM"
                  name="name"
                  label="签退时间"
                  readonly
                  placeholder="默认签退时间"
                  class="readonly-field"
          />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {showFailToast, showSuccessToast} from "vant";
import myAxios from "../../plugins/myAxios.js";
import {getCurrentUser} from "../services/user.ts";
const checked = ref(true);
const router = useRouter();

const showCalendar = ref(false);
const result = ref('');
const showPicker = ref(false);
const checkPassword  = (val) => /^.{8,}$/.test(val);

const columns = [
    { text: '用户', value: 'user' },
    { text: '公司管理员', value: 'deptManager' }
];

onMounted(async () => {
    addUserData.value.userRoleText = "员工"
    addUserData.value.userRoleValue = "user";
    signLocationInfo.value = await signLocation();
})
const onConfirmPicker = ({ selectedOptions }) => {
    addUserData.value.userRoleText = selectedOptions[0]?.text;
    addUserData.value.userRoleValue = selectedOptions[0]?.value;
    showPicker.value = false;
}

const initFormData = {
    "userAccount": "",
    "userPassword": "",
    "email": "",
    "phone": "",
    "userRoleText":"",
    "userRoleValue":"",
    "userProfile":""
}
const initDeptInfo = {
    "id": 0,
    "deptName": "",
    "deptLocation": "",
    "deptSignGpsLocation": "",
    "localRange": 0,
    "signInTimeSFM": "",
    "signOutTimeSFM": "",
}
const signLocationInfo = ref({...initDeptInfo});
// 需要用户填写的表单数据
const addUserData = ref({...initFormData});

const onSubmit = async () =>{
  const res = await myAxios.post("/user/add",{
      userAccount:addUserData.value.userAccount,
      userPassword: addUserData.value.userPassword,
      email: addUserData.value.email,
      phone: addUserData.value.phone,
      userRole: addUserData.value.userRoleValue,
      userProfile: addUserData.value.userProfile,
      deptId: signLocationInfo.value.id,
  });
  if (res.data.code === 0 && res.data){
    showSuccessToast('添加成功');
    await router.push({
      path: '/admin/dashboard',
      replace: true,
    });
  }else {
    showFailToast("添加失败");
  }
}
/*得到登录用户的管理员的的公司情况*/
const signLocation = async () => {
    const signLocationRes =  await myAxios.get('/userSignState/signLocation',{});
    //分割经纬度
    return signLocationRes.data.data;
}

</script>

<style scoped>
:deep(.readonly-field input) {
    color: #999;
}
</style>